<template>
	<view>
		<uni-nav-bar :statusBar="true">
			<!-- 左边 -->
			<block slot="left">
				<view class="navLeft">
					<view class="icon iconfont icon-qiandao"></view>
				</view>
			</block>
			<view class="navTab">
				<block v-for="(tab,index) in tabList" :key="tab.id">
					<view :class="{'active':tabIndex==index}" @tap="setTab(index)">
						{{tab.text}}
						<view class="navLine" v-if="tabIndex ==index"></view>
					</view>
				</block>
			</view>
			<!-- 右边边 -->
			<block slot="right">
				<view class="navRight" @tap="setTo">
					<view class="icon iconfont icon-bianji1"></view>
				</view>
			</block>
		</uni-nav-bar>
	</view>
</template>

<script>
	import uniNavBar from '@/components/common/uni-nav-bar.vue';
	export default{
		props:['tabList','tabIndex','statusBar'],
		data(){
			return{
				 
				}
			},
			components: {
				uniNavBar,
			},
			methods:{
				setTab(index){
					this.$emit('changeTab',index)
				},
				setTo(){
					uni.navigateTo({
						url: '../release/release',
					});
				},
			}
		
	}
</script>

<style scoped>
	.navLeft{
		margin-left: 10upx;
		color: #FFA740;
		
	}
	.navLeft>view,.navRight>view{
		font-size: 45upx;
	}
	.navTab{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-left: -20upx;
	}
	.navTab>view{
		padding: 0 10upx;
		font-weight: bold;
		color: #CDCDCD;
		position: relative;
		text-align: center;
		width: 80upx;
	}
	.navTab .active{
		color:#000000 ;
	}
	.navTab .navLine{
		border-top: 2px solid #FEDE33;
		border-bottom: 2px solid #FEDE33;
		border-radius: 4px;
		width: 80upx;
		position: absolute;
		bottom: -2upx;
	}
	.navRight{
		width: 100%;
		text-align: right;
		margin-right: 10upx;
		color: #000000;
	}
</style>
